const canvas1 = document.getElementById('canvas1');
const canvas2 = document.getElementById('canvas2');
const diffCanvas = document.getElementById('diffCanvas');
const ctx1 = canvas1.getContext('2d');
const ctx2 = canvas2.getContext('2d');
const diffCtx = diffCanvas.getContext('2d');
const debugInfo = document.getElementById('debugInfo');

let pdf1 = null;
let pdf2 = null;
let currentPage1 = 1;
let currentPage2 = 1;
let diffThreshold = 30;
let blurLevel = 1;

function log(message) {
    console.log(message);
    debugInfo.innerHTML += message + '<br>';
}

// Event Listeners
document.getElementById('pdf1').addEventListener('change', function(e) {
    if (e.target.files[0]) {
        debugInfo.innerHTML = '';
        loadPDF(e.target.files[0], 'canvas1', 1);
    }
});

document.getElementById('pdf2').addEventListener('change', function(e) {
    if (e.target.files[0]) {
        debugInfo.innerHTML = '';
        loadPDF(e.target.files[0], 'canvas2', 2);
    }
});

document.getElementById('diffThreshold').addEventListener('input', function(e) {
    diffThreshold = parseInt(e.target.value);
    document.getElementById('thresholdValue').textContent = diffThreshold;
    if (pdf1 && pdf2) comparePages();
});

document.getElementById('blurLevel').addEventListener('input', function(e) {
    blurLevel = parseInt(e.target.value);
    document.getElementById('blurValue').textContent = blurLevel;
    if (pdf1 && pdf2) comparePages();
}); 